<template>
  <page-body :bgImg="ossDomain + '/daily-index/dailyIndex-bg.png'" safeAreaLeft>
    <view class="pages font-B ">
      <nav-bar title='每日指数' :backBtn='false' titleColor='#fff' :borderBottom='false'>
        <view slot="left" class="jh-flex-center" style="width: 50px;height: 50px;" @tap="back()">
          <image style="width: 9px;height: 16px;display: block;" :src="ossDomain + '/icon-bg3.png'"></image>
        </view>
      </nav-bar>
      <view class="jh-flex-center" style="width: 100%;height: calc(100vh - 50px);">
        <view class="dailyIndex">
          <image class="dailyIndex-bg" :src="ossDomain + '/daily-index/dailyIndex-bg2.png'" mode="scaleToFill"></image>
          <view class="jh-column jh-space-between jh-align-center" style="height: 100%;position: relative;z-index: 2;">
            <view class="dailyIndex-list jh-flex-center">
              <view class="padding-10" v-for="(i,index) in list1" :key='index'>
                <view class="dailyIndex-list-main">
                  <image class="dailyIndex-list-bg" :src="ossDomain + '/daily-index/dailyIndex-item'+i.id+'.png'">
                  </image>
                  <view class="dailyIndex-list-text1 font-B c-fff font-18 jh-line-height">
                    {{i.value || ''}}
                  </view>
                  <view class="dailyIndex-list-text2 font-R c-fff font-8 jh-line-height">
                    {{i.sub_title || ''}}
                  </view>
                </view>
                <view class="font-8 c-fff jh-flex-center font-R padding-t10">{{i.title || ''}}</view>
              </view>
            </view>
            <view class="dailyIndex-list jh-flex-center">
              <view class="padding-10" v-for="(i,index) in list2" :key='index'>
                <view class="dailyIndex-list-main">
                  <image class="dailyIndex-list-bg" :src="ossDomain + '/daily-index/dailyIndex-item'+i.id+'.png'">
                  </image>
                  <view class="dailyIndex-list-text1 font-B c-fff font-18 jh-line-height jh-flex-center">
                    {{i.value || ''}}
                  </view>
                  <view class="dailyIndex-list-text2 font-R c-fff font-8 jh-line-height">
                    {{i.sub_title || ''}}
                  </view>
                </view>
                <view class="font-8 c-fff jh-flex-center font-R padding-t10">{{i.title || ''}}</view>
              </view>
            </view>
            <view class="dailyIndex-empty c-fff font-22 font-M" v-if="!list1.length && !list2.length">
              没有数据
            </view>
            <view class="jh-align-center jh-space-between ">
              <image class="padding-10" style="width: 9px;height: 16px;display: block;transform: scale(.8);"
                :src="ossDomain + '/icon-bg3.png'" @tap='preTime'></image>
              <view class="font-13 c-fff padding-l10 padding-r10">{{time | filtTime}}</view>
              <image class="padding-10"
                style="width: 9px;height: 16px;display: block;transform: rotate(180deg) scale(.8);"
                :src="ossDomain + '/icon-bg3.png'" @tap='nextTime'></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        now: (new Date).getTime(),
        time: (new Date).getTime(),
        list1: [],
        list2: []
      }
    },
    filters: {
      filtTime(time) {
        time = new Date(time)

        function addZeroPrefix(number) {
          return number < 10 ? `0${number}` : number
        }
        return `${time.getYear() + 1900}-${addZeroPrefix(time.getMonth() + 1)}-${addZeroPrefix(time.getDate())}`
      }
    },
    onLoad() {
      this.userDailyData(this.getSday(this.time))
    },
    methods: {
      preTime () {
        if (this.time > 86400000) {
          this.time = this.time - 86400000
          this.userDailyData(this.getSday(this.time))
        }
      },
      nextTime () {
        console.log(this.now - this.time);
        if (this.now - this.time >= 86400000) {
          this.time = this.time + 86400000
          this.userDailyData(this.getSday(this.time))
        }
      },
      addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number
      },
      getSday(time) {
        time = new Date(time)
        return `${time.getYear() + 1900}-${this.addZeroPrefix(time.getMonth() + 1)}-${this.addZeroPrefix(time.getDate())}`
      },
      userDailyData(sday) {
        uni.showLoading({
          title: '正在加载中',
          mask: true
        })
        this.$http.userDailyData({
          sday: sday
        }).then(res => {
          uni.hideLoading()
          let data = res.data
          this.list1 = []
          this.list2 = []
          if(data.length) {
            data.map((i,index) => {
              return i.id = index % 10
            })
            this.list1 = data.splice(0,4)
            this.list2 = data
          }
        })
      },
      back() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    width: 100%;
    height: 100vh;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .dailyIndex {
    width: 100%;
    height: calc(100% - 30px);
    position: relative;

    &-bg {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      z-index: 1;
    }
    &-empty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    &-list {

      &-bg {
        width: 82px;
        height: 82px;
        display: block;
      }

      &-main {
        position: relative;
      }

      &-text1 {
        width: 70px;
        text-align: center;
        position: absolute;
        top: 27px;
        left: 50%;
        transform: translateX(-50%);
      }

      &-text2 {
        width: 60px;
        text-align: center;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
